<template>
	<div class="myGd">
		<div class="room_top">
			<div class="room_top_search">
				<u-search placeholder="请输入工单编号查询" @custom='searchEvnet' v-model="keyword" @click='searchEvnet'
					@search='searchEvnet'></u-search>
			</div>
			<div class="room_top_select">
				<div class="room_top_select_items" v-for="(item,index) in list" :key="index" @click='closeEvent(index)'>
					<span>{{item.name}}</span>
					<u-icon name="arrow-up-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-if="item.status == 2"></u-icon>
					<u-icon name="arrow-down-fill" color='#ABABAB' size='13' style="margin-left: 20rpx;"
						v-else></u-icon>

				</div>
			</div>
		</div>
		<!-- right -->
		<div class="rightBtn">
			<u-icon name="plus-circle-fill" color="#2979ff" size="48" @click='addEvent'> </u-icon>
		
		</div>
		<!-- list -->
		<div class="pagesList">
			<page-list :list='floorList' @upData='upData'></page-list>
		</div>
		<!--  -->
		<u-picker :show="show" :closeOnClickOverlay='true' @close='cancel' :columns="columnsStatus" @confirm='confirm' @cancel='cancel' keyName="label"></u-picker>
		<u-picker :show="showT" :closeOnClickOverlay='true' @close='cancel' :columns="columnsT" @confirm='confirmT' @cancel='cancel' keyName="label"></u-picker>
		<!-- 		<u-picker :show="showF" :columns="columnsF" ref="uPicker" @confirm='confirmF' @cancel='cancel' keyName="name"
			@change="changeHandler"></u-picker> -->
	</div>
</template>

<script>
	import pageList from '@/pagesA/components/list.vue'
	export default {
		components: {
			pageList
		},
		data() {
			return {
				list: [{
					name: '工单状态',
					status: 1,
				}, {
					name: '工单类型',
					status: 1,
				}],
				// keyword:'',
				// page:1,
				// 1待处理 2已处理 3已转交 4已取消 5已评价
				columnsStatus: [
					[{
						label: '全部',
						id: 'all'
					}, {
						label: '待处理',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '已处理',
						id: 2
					}, {
						label: '已转交',
						id: 3
					}, {
						label: '已取消',
						id: 4
					}, {
						label: '已评价',
						id: 5
					}]
				],
				columnsT: [
					[{
						label: '全部',
						id: 'all'
					}, {
						label: '常规',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '下单游戏',
						id: 2
					}, {
						label: '弹幕游戏',
						id: 3
					}, {
						label: '团播',
						id: 4
					}, ]
				],
				columnsF: [],
				show: false,
				showF: false,
				showT: false,
				louList: [],
				floorList: [],
				keyword: '',
				storey_id: '',
				floor_id: '',
				room_id: '',
				type: '',
				status: '',
				page: 1,
				userStatus: '',
				work_id:[]
			}
		},
		mounted() {
			this.getRoomList()
			this.userStatus = uni.getStorageSync('userStatus')
		},
		methods: {
			searchEvnet() {
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			searchEvnet() {
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			closeEvent(e) {
				if (e == 0) {
					this.show = true
				} else if (e == 1) {
					this.showT = true
				} else {
					this.showF = true
				}
			},
			upData() {
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			cancel() {
				console.log(111)
				this.showT = this.showF = this.show = false
			},
			async getRoomList() {
				const {
					data
				} = await this.$request(this.$Api.indexsDetail, {
					work_id:this.work_id
				}, "POST")
				if (data.code !== 0) return
				this.floorList = this.floorList.concat(data.data.list)
			},
			confirm(e) {
				console.log('111', e)
				this.status = e.value[0].id
				if (e.value[0].label == '全部') {
					this.list[0].name = '工单状态'
					this.list[0].status = 1
				} else {
					this.list[0].name = e.value[0].label
					this.list[0].status = 2
				}
				this.showT = this.showF = this.show = false
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			confirmT(e) {
				this.type = e.value[0].label
				console.log('3333', e)
				this.showT = this.showF = this.show = false
				// this.list[1] = e.value[0].label
				if (e.value[0].label == '全部') {
					this.list[1].name = '工单类型'
					this.list[1].status = 1
				} else {
					this.list[1].name = e.value[0].label
					this.list[1].status = 2
				}
				this.page = 1
				this.floorList = []
				this.getRoomList()
			},
			addEvent(){
				uni.navigateTo({
					url:'/pagesA/index/server/server'
				})
			}
		}
	}
</script>

<style lang="scss">
	.room_top {
		width: 750rpx;
		height: 216rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		z-index: 9;

		.room_top_search {
			padding: 30rpx;
			box-sizing: border-box;
		}

		.room_top_select {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			margin-top: 10rpx;
		}

		.room_top_select_items {
			font-size: 28rpx;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 33.33%;

			span {
				margin-right: 10rpx;
			}
		}
	}

	.pagesList {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-bottom: 80rpx;
		height: calc(100% - 336rpx);
		overflow: scroll;
		margin-top: 218rpx;
	}
	.rightBtn{
		position: fixed;
		right: 30rpx;
		bottom: 15%;
		z-index: 999;
	}
</style>